<template>
    <div class="home-layout">
        <transition name="sidebar-fade-zoom">
            <aside class="sidebar" v-show="showSidebar">
                <div class="logo animated-logo">
                    风华无缺数据后台
                    <div class="user-info" v-if="user">
                        <span class="user-name">{{ user.name }}</span>
                        <span class="user-position">{{ user.position }}</span>
                    </div>

                    <el-button
                        type="danger"
                        size="small"
                        round
                        class="logout-btn"
                        @click="logout"
                    >
                        退出登录
                    </el-button>
                </div>
                <el-menu
                    :default-openeds="['member', 'admin']"
                    class="el-menu-vertical-demo"
                    background-color="#fff"
                    text-color="#333"
                    active-text-color="#409EFF"
                    router
                >
                    <!-- 社员部分 -->
                    <el-sub-menu index="member">
                        <template #title>
                            <span>社员部分</span>
                        </template>
                        <el-menu-item index="/home/member/profile"
                            >修改主页信息</el-menu-item
                        >
                        <el-menu-item index="/home/member/book"
                            >修改册子信息</el-menu-item
                        >
                        <el-menu-item index="/home/member/characters"
                            >修改侠客信息</el-menu-item
                        >
                    </el-sub-menu>
                    <!-- 管理员部分，仅社长/管理员可见 -->
                    <!-- <el-sub-menu v-if="isAdmin" index="admin"> -->
                    <el-sub-menu v-if="isAdmin" index="admin">
                        <template #title>
                            <span>管理员部分</span>
                        </template>
                        <el-menu-item index="/home/admin/account"
                            >账号管理</el-menu-item
                        >
                        <el-sub-menu index="admin-approve">
                            <template #title>
                                <span>信息修改审批</span>
                            </template>
                            <el-menu-item index="/home/admin/approveProfile"
                                >主页信息审批</el-menu-item
                            >
                            <el-menu-item index="/home/admin/approveBook"
                                >册子信息审批</el-menu-item
                            >
                            <el-menu-item index="/home/admin/approveCharacters"
                                >侠客信息审批</el-menu-item
                            >
                        </el-sub-menu>
                        <el-sub-menu index="admin-manage">
                            <template #title>
                                <span>官网信息管理</span>
                            </template>
                            <el-menu-item index="/home/admin/manageProfile"
                                >主页信息管理</el-menu-item
                            >
                            <el-menu-item index="/home/admin/manageBook"
                                >册子信息管理</el-menu-item
                            >
                            <el-menu-item index="/home/admin/manageCharacters"
                                >侠客信息管理</el-menu-item
                            >
                            <el-menu-item index="/home/admin/manageVideo"
                                >视频数据管理</el-menu-item
                            >
                            <el-menu-item index="/home/admin/manageAnnouncement"
                                >公告数据管理</el-menu-item
                            >
                            <el-menu-item index="/home/admin/pageAssets"
                                >其他图片素材</el-menu-item
                            >
                        </el-sub-menu>
                    </el-sub-menu>
                    <el-menu-item index="/home/edit" style="margin-top: 12px">
                        修改个人信息
                    </el-menu-item>
                    <el-button
                        type="warning"
                        :loading="loading"
                        @click="goToUpload"
                        round
                        >点击前往上传图片或视频</el-button
                    >
                </el-menu>
            </aside>
        </transition>
        <main class="main-content">
            <transition name="main-fade-zoom">
                <div class="main-card">
                    <router-view />
                </div>
            </transition>
        </main>
    </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import axios from "axios";
import { BASE_URL, upload_URL } from "../config/http.js";
import { getUserById } from "./api";
import { useRouter } from "vue-router";

const showSidebar = ref(false);
const user = ref(null);
const isAdmin = ref(false);
const router = useRouter();
function goToUpload() {
    window.open(upload_URL, "_blank");
}
onMounted(() => {
    setTimeout(() => {
        showSidebar.value = true;
    }, 100);
    // 获取当前登录用户信息
    const userId = sessionStorage.getItem("user_id");
    if (userId) {
        getUserById(userId).then((data) => {
            user.value = data;
            isAdmin.value = ["社长", "管理员"].includes(user.value.position);
        });
    }
});
function logout() {
    sessionStorage.removeItem("user_id");
    sessionStorage.removeItem("token");
    router.replace("/login");
}
</script>

<style lang="scss" scoped>
.home-layout {
    display: flex;
    height: 100%;
    background: linear-gradient(135deg, #e0e7ff 0%, #f5f7fa 100%);
    animation: bgFadeIn 1.2s;
}
@keyframes bgFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
.sidebar {
    width: 180px;
    min-width: 120px;
    background: #fff;
    box-shadow: 0 8px 32px 0 rgba(60, 60, 120, 0.18);
    border-radius: 32px 0 32px 0;
    margin: 24px 0 24px 24px;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.3s, width 0.3s;
    overflow: hidden;
    animation: sidebarPop 0.7s cubic-bezier(0.55, 0, 0.1, 1);
}
@keyframes sidebarPop {
    0% {
        opacity: 0;
        transform: scale(0.8) translateX(-40px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateX(0);
    }
}
.logo {
    font-size: 2.2rem;
    font-weight: bold;
    color: #409eff;
    text-align: center;
    padding: 40px 0 32px 0;
    letter-spacing: 2px;
    background: linear-gradient(90deg, #e0e7ff 0%, #fff 100%);
    border-bottom: 1px solid #f0f0f0;
    border-radius: 32px 32px 0 0;
    box-shadow: 0 2px 8px #e0e7ff;
    transition: text-shadow 0.3s;
}
.animated-logo {
    animation: logoFadeIn 1.2s;
}
@keyframes logoFadeIn {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}
.user-info {
    margin-top: 18px;
    font-size: 1.1rem;
    color: #333;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    animation: fadeInUser 0.8s;
}
.user-name {
    font-weight: bold;
    color: #409eff;
}
.user-position {
    font-size: 1rem;
    color: #666;
}
@keyframes fadeInUser {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.el-menu-vertical-demo {
    border-right: none;
    flex: 1;
    font-size: 1.15rem;
    background: transparent;
    .el-menu-item,
    .el-sub-menu__title {
        border-radius: 24px !important;
        margin: 6px 12px;
        transition: background 0.2s, color 0.2s;
        min-height: 48px;
    }
    .el-menu-item:hover,
    .el-sub-menu__title:hover {
        background: #e0e7ff !important;
        color: #409eff !important;
    }
}
.main-content {
    flex: 1;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 0;
    overflow: auto;
}
.main-card {
    width: 90%;
    min-height: 95%;
    background: #fff;
    border-radius: 32px;
    box-shadow: 0 8px 32px 0 rgba(60, 60, 120, 0.12);
    padding: 48px 36px;
    margin: 32px 0;
    animation: mainPop 0.7s cubic-bezier(0.55, 0, 0.1, 1);
}
@keyframes mainPop {
    0% {
        opacity: 0;
        transform: scale(0.95);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}
.sidebar-fade-zoom-enter-active {
    animation: sidebarPop 0.7s cubic-bezier(0.55, 0, 0.1, 1);
}
.main-fade-zoom-enter-active {
    animation: mainPop 0.7s cubic-bezier(0.55, 0, 0.1, 1);
}
</style>